<template>
  <div class="container">
      <div class="actpic">
          <img :src="pingInfo.thumb" alt="" mode="aspectFill">
          <div class="report">
              <report :info="pingInfo" type="2" model="1"></report>
          </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
            <div class="classname">{{pingInfo.title}}</div>
            <div class="price">￥{{pingInfo.price}} <span>￥{{pingInfo.prime_price}}</span></div>
        </div> 
        <div class="weui-cell__ft share" @click="share">
            <van-icon name="share" color="#1A84FB" size="23px"/>
            <p>邀请好友</p>
        </div>
      </div>
      <div class="lian"></div>
      <div class="weui-cell user">
         <div class="weui-cell__hd">
               <avatar 
               :avatar="pingInfo.user.avatar" 
               :Level="pingInfo.user.partner_level" 
               :userId="pingInfo.user.id" 
               :isAuth="pingInfo.user.is_auth" 
               :isPartner="pingInfo.user.is_partner" 
               v-if="pingInfo.user"></avatar>
         </div>
         <div class="weui-cell__bd">
             <span class="nickname">{{user.nickname}}</span>
         </div>
         <div class="weui-cell__ft">
              <!-- <div class="toSend"  @click="chatTo(pingInfo.user)">私信</div>  -->
              <chatBtn :userInfo="pingInfo.user"/>
         </div>
         <div class="weui-cell__ft">
             <Follow :info="pingInfo" :userId="pingInfo.user.id" ></Follow>
         </div>
      </div>
      <div class="adr weui-cell">
          <div class="weui-cell__hd"><img src="/static/images/ic_location@2x.png" class="adrIcon"/>位置：</div>
          <div class="weui-cell__bd">{{pingInfo.address}}</div>
      </div>
      <div class="pin">
           <van-tabs  @change="onClick" :active="active" sticky >
            <van-tab
              v-for="(item,index) in pinNav"
              :title="item.name"
              :key="index"
            >
                <classTit :title="item.name"></classTit>
                <div v-if="index==0">
                    <div class="imgDetail">
                      <wxParse :content="pingInfo.content" />
                      <!-- <img v-for="(item,idx) in pingInfo.images" :key="idx" :src="item" mode="widthFix"/> -->
                    </div>
                </div>
                <div v-if="index==1">
                    <ul>
                      <li class="jionList" @click="topinList(itemMember)" v-for="(itemMember,idx) in member" :key="idx">
                          <div class="weui-cell  ">
                              <div class="weui-cell__hd">
                                    <avatar 
                                      :avatar="itemMember.user.avatar" 
                                      :userId="itemMember.user.id"></avatar>
                              </div>
                              <div class="weui-cell__bd">
                                  <div class="nickname">{{itemMember.user.nickname}}</div>
                                  <div class="time">{{itemMember.created_at}}</div>   
                              </div>
                              <div class="weui-cell__ft" v-show="(itemMember.small_group_max-1-itemMember.team.length)!=0">
                                  <div class="follow">插队拼单</div> 
                              </div>
                          </div>
                          <div class="weui-cell">
                            <div class="weui-cell__bd">
                                  <div class='txImg' v-if="itemMember.team_mem">
                                    <div class='txItem' v-for="(itemT,ind) in itemMember.team_mem" :key="ind"><img :src='itemT.avatar' /></div>
                                  </div>
                            </div>
                            <div class="weui-cell__ft remain" v-if="(itemMember.small_group_max-1-itemMember.team.length)!=0">还差<span>{{itemMember.small_group_max-1-itemMember.team.length}}</span>人拼课成功</div>
                            <div class="weui-cell__ft remain" v-else>拼课成功</div>
                          </div>
                      </li>
                    </ul>
                    <div>
                         <img :src="img+'/que/no_student@2x.png'" alt="" class="queS" v-if="queS1">
                    </div>
                </div>
                
                <div v-if="index==2">
                    <evaluate  :type="1" @selCom="selCom" :Comment="Comment"></evaluate>
                </div>
            </van-tab>
          </van-tabs>
          <div class="kong"></div>
          <div class="footer">
              <van-goods-action>
                <van-goods-action-icon
                  icon="wap-home"
                  text="首页"
                  @click="toIndex"
                />
                <van-goods-action-icon
                  :icon="pingInfo.is_collect?'star':'star-o'"
                  text="收藏"
                  color="#1A84FB"
                  open-type="getUserInfo" 
                  @getuserinfo="bindGetUserInfo($event,pingInfo,3)"
                />
                
                <div class="btn"  v-if="keStart">
                      <van-button class="appppp" type="" open-type="getUserInfo" @getuserinfo="bindGetUserInfo($event,pingInfo,1)">
                          <div class="prices">￥{{pingInfo.buy_price}}</div> <span>单独购买</span>
                      </van-button>
                      
                </div>
                <div class="btn btn1"  v-if="keStart">
                  <van-button class="appppp" type="" open-type="getUserInfo" @getuserinfo="bindGetUserInfo($event,pingInfo,2)">
                        <div class="prices">￥{{pingInfo.price}}</div><span>发起拼课</span>
                    </van-button>
                    
                </div>
                <div class="btn" v-else>
                      <div class="prices">请等待...</div>课程没有开始
                </div>    
              </van-goods-action>
          </div>
      </div>
      <van-popup
        :show="show"
        position="bottom"
        :bind:close="onClose"
        close-on-click-overlay
        >
        <div class="buystyle">
           <div class="weui-cell"><div class="weui-cell__bd"></div><div class="weui-cell__ft" @click="close()"> <img src="/static/images/closed.png" class="closed"/></div></div>
           <div class="originator weui-cell" v-if="type==2">
              <div class="weui-cell__hd">
                  <div class="thumb" style="overflow:hidden;">
                      <img :src="myUser.avatar" alt="" class="avatar">
                      <span>发起人</span>
                  </div>
              </div>
              <div class="weui-cell__bd nickname">{{myUser.nickname}}</div>
           </div>
           <div class="weui-cell" v-if="pingInfo.user.is_partner==1">
             <div class="weui-cell__bd">会员特惠</div>
             <div class="weui-cell__ft">-{{pingInfo.discount}}</div>
           </div>
           <div class="weui-cell">
             <div class="weui-cell__bd">报名费用</div>
             <div class="weui-cell__ft">￥{{pingInfo.price}}</div>
           </div>
           <div class="weui-cell">
             <div class="weui-cell__bd"></div>
             <div class="weui-cell__ft"  v-if="pingInfo.user.is_partner==1">
               <span class="totalprice" v-if="type==1">￥{{pingInfo.price-pingInfo.discount}}</span>
               <span class="totalprice" v-if="type==2">￥{{pingInfo.buy_price-pingInfo.discount}}</span>
             </div>
             <div class="weui-cell__ft"  v-else>
               <span class="totalprice" v-if="type==1">￥{{pingInfo.buy_price}}</span>
               <span class="totalprice" v-if="type==2">￥{{pingInfo.price}}</span>
             </div>
           </div>
           <div class="weui-cell"></div>
           <van-button type="info" size="large" custom-class="toBuy"  v-if="type==1" @click="toBuyone">单独购买</van-button>
           <van-button type="info" size="large" custom-class="toBuy"  v-if="type==2" @click="toBuy">发起拼课({{pingInfo.small_group_max}}人团)</van-button>
        </div>
      </van-popup>
  </div>
</template>

<script>
import swiper from "@/components/swiper";
import top from "@/components/top"
import navList from "@/components/nav";
import courseList from "@/components/list";
import classTit from "@/components/classTit";
import evaluate from "@/components/evaluate"
import Follow from "@/components/follow"
import avatar from "@/components/avatar"
import chatBtn from "@/components/chatBtn"
import { xdLogin } from "@/utils/login"
import wxParse from 'mpvue-wxparse'

import {pingInfo} from "@/api/ping"
import {pingCreate} from "@/api/ping"
import {pingCreateOne} from "@/api/ping"
import {pingMenmber} from "@/api/ping"
import {pay} from "@/utils/pay"
import { collectA } from "@/api/operate";
import { eva_list } from "@/api/evaluate";
export default {
  components: {
      chatBtn,
      swiper,
      top,
      navList,
      courseList,
      classTit,
      evaluate,
      Follow,
      avatar,
      wxParse
  },

  data () {
    return {
      currentStar:"0",
      isfollowed:1,
      active:0,
      show:false,
      type:"",
      pinNav:[
        {name:"课程介绍",id:"1"},
        {name:"拼课成员",id:"2"},
        {name:"用户评价",id:"3"},
      ],
      classTags:[],
      currentTags:0,
      pingInfo:{},
      member: [],
      user:{},
      pingId:"",
      keType:"",
      userId:0,
      myUser:"",
      share_user:"0",
      img: this.$URL.imgurl,
      keStart:true,
      page:1,
      selComId:0,
      currentPage:1,
      load:false,
      load1:false,
      queS1:false,
      queS2:false,
      Comment:[]
    }
  },
  methods:{
    bindGetUserInfo(e,info,type){
  // type==3 收藏
  // type==1 单独购买
  // type==2 拼团
        wx.getStorage({
            key: 'token',
            success: (result) => {
                if(type==3)  {
                    this.toCollect(info)
                } else if(type==1) {
                    this.popup(type)
                }else if(type==2) {
                    this.popup(type) 
                }
            },
            fail: () => {
                xdLogin(e).then((res)=>{
                    if(type==3)  {
                        this.toCollect(info)
                    } else if(type==1) {
                        this.popup(type)
                    } else if(type==2) {
                        this.popup(type)
                    }
                })
            },
            complete: () => {}
        });
          
        console.log(e,info)
        
      
    },
    chatTo(item) {
        wx.navigateTo({
            url: '/pages/chatOnLine/main?info=' + JSON.stringify(item)
        })
    },
    onClick(e){
        let idx= e.target.index;
        this.active=idx;
        console.log(e)
        if(idx==1){
           console.log(e)
           if(this.member.length==0){
              this.getpingMenmber()
           }
        }else if(idx==2){
            this.getComment()
        }

    },
    toIndex(){
        let url="../index/main";
        console.log(mpvue)

        mpvue.switchTab({url})
    },
    popup(type){
       this.type=type;
       this.show=true
    },
    close(){
      this.show=false
    },
    topinList(item){
      let itemJson=JSON.stringify(item)
      let url="../pinList/main?item="+itemJson+"&id="+this.pingInfo.id;
      mpvue.navigateTo({url});
    },
    report(userId,classId) {
        console.log(userId,classId)
        wx.showActionSheet({
            itemList: ['举报'],
            success (res) {
                console.log(res.tapIndex)
            },
            fail (res) {
                console.log(res.errMsg)
            }
        })
    },
    
    getComment(){
        this.queS2=false
        let data={};
        data.mp_id=this.pingInfo.user.id;
        data.tag_ids=this.selComId;
        data.page=this.currentPage;
        eva_list(data).then(res=>{
            if(res.code==200){ 
              let last_page=res.data.last_page;
              if(this.page==1){
                  this.Comment=res.data.data
              }else{
                  this.Comment=this.Comment.concat(res.data.data)
              }
              if(last_page>this.currentPage){
                this.load1=true
              }else{
                this.load1=false
              }
           }else if(res.code==201){
              this.queS2=true;   
           }
        })
    },
    getpingInfo(){
        this.keStart=true
        let data={};
        data.id=this.pingId;
        data.user_id=this.userId;
        pingInfo(data).then(res=>{
          if(res.code==200){
            this.pingInfo=res.data,
            this.user=res.data.user;
            console.log(this.pingInfo)
            if(this.pingInfo.is_normal==0){
                wx.showToast({
                  title: res.msg,
                  icon: 'none',
                });
                this.keStart=false
            }
          }else if(res.code==201){
             wx.showToast({
               title: res.msg,
               icon: 'none',
             });    
          }
        }).then(res=>{
          this.getComment()
        })
    },
    
    getpingMenmber(){
      this.queS1=false
      let data={};
        data.id=this.pingId;
        pingMenmber(data).then(res=>{
           if(res.code==200){ 
              let last_page=res.data.last_page;
              if(this.page==1){
                  this.member=res.data.data
              }else{
                  this.member=this.member.concat(res.data.data)
              }
              if(last_page>this.page){
                this.load=true
              }else{
                this.load=false
              }
           }else if(res.code==201){
              this.queS1=true;   
           }
        }) 
    },
    toBuyone(){
       let data={};
       data.payment=1;
       data.id=this.pingId;
       data.share_user=this.share_user
       pingCreateOne(data).then(res=>{
         if(res.code==201){
             this.show=false
             wx.showToast({
              title:res.msg,
              icon: 'none',
            });
         }else if(res.code==200){
             pay(res.data).then(res=>{
                this.show=false;
                wx.navigateTo({
                  url:"/pages/paySuccess/main"
                })
            }).err(res=>{
                this.show=false
            })
         }
       })
    },
    toBuy(){
      let data={};
       data.payment=1;
       data.id=this.pingId;
       data.share_user=this.share_user
       pingCreate(data).then(res=>{
         if(res.code==201){
             this.show=false
             wx.showToast({
              title:res.msg,
              icon: 'none',
            });
         }else if(res.code==200){
            pay(res.data).then(res=>{
                this.show=false
                wx.navigateTo({
                  url:"/pages/paySuccess/main"
                })
            }).err(res=>{
                this.show=false
            })
         }
       })
    },
    toCollect(info){
      console.log(11)
       let data={};
        data.id=info.id
        data.type=5;
        collectA(data).then(res=>{
          let msg=res.msg
            if(res.code==200){
                info.is_collect=!(info.is_collect)
            }
        })
    },
    follow(item){
       let guan=item.is_action;
       item.is_action=!guan;
    },
    selCom(data){
      this.selComId=data.id;
      this.Comment=[]
      this.getComment()
    },
    share(){
        wx.navigateTo({
          url:"/pages/shareKc/main?type=5&id="+this.pingId
        })
    }
  },
  created(){
    
  },
  onLoad(options){
      console.log(options)
      Object.assign(this.$data, this.$options.data())
      this.pingId=options.id;
      this.myUser= wx.getStorageSync("user_info")
      wx.getStorageSync("user_info")?this.userId=wx.getStorageSync("user_info").id:this.userId==0;
      wx.getStorageSync("share_user")?this.share_user=wx.getStorageSync("share_user"):this.share_user=0;
      this.keType=options.keType
      this.getpingInfo()
  },
  onUnload(){
     
  },
  onShow(){
     
  },
  onReachBottom(){
    if(this.load){
       this.page++
       this.getpingMenmber()
    }
    if(this.load1){
       this.currentPage++
       this.getComment()
    }
  },
}
</script>
<style  lang="scss">
@import url("~mpvue-wxparse/src/wxParse.css");
   .queS{
      width: 208px;
      height: 162px;
      display: block;
      margin: 50px auto;
   }
  .pin{
     .van-tabs__line {
        background-color:#1A84FB;
     }
     .van-tab--active {
       font-size:14px;
       font-weight:bold;
       color:#333333;
     }
  }
  .buystyle{
    .toBuy{
      background-color:#1A84FB;
      color:#fff;
    }
    .weui-cell{
      font-size: 15px;
      line-height: 1;
    }
    .closed{
      width:16px;
      height:16px;
    }
     .totalprice{
        font-size:18px;
        font-weight:bold;
        color:rgba(26,132,251,1);
        line-height:18px
     }
  }
  .imgDetail{
    padding:10px 15px;
    img{
      width:100%;
      display:block;
    }
  }
  
</style>
<style lang="scss">
    .actpic{
        width:375px;
        height:188px;
        position: relative;
        img{
          width:375px;
          height:188px;
          display: block;
        }
        .report{
            width:25px;
            height:15px;
            display:block;
            position: absolute;
            top: 15px;
            right: 15px;
        }
    }
    .classname{
        font-size:15px;
        font-weight:bold;
        color:rgba(51,51,51,1);
    }
    .price{
      font-size:18px;
      font-weight:500;
      color:rgba(26,132,251,1);
      line-height:18px;
      margin-top: 16px;
      span{
        font-size:12px;
        font-weight:500;
        text-decoration:line-through;
        color:rgba(102,102,102,1);
      }
    }
    .share{
      font-size:11px;
      font-weight:500;
      color:rgba(26,132,251,1);
      line-height:18px;
      text-align:center;
       .shareIcon{
         width:21px;
         height:21px;
       }
    }
    .lian{
      width:375px;
      height:5px;
      background:rgba(244,245,245,1);
    }
    .user{
      padding-top: 20px;
      .thumb{
        position: relative;
        width:55px;
        height:55px;
        margin-right: 14px;
         .avatar{
            width:55px;
            height:55px;
            border:1px solid rgba(26,132,251,1);
            border-radius:50%;
         }
         .grade{
           position: absolute;
           bottom:0;
           right: 0;
           width:15px;
           height:14px;
           
         }
      }
      .nickname{
        font-size:14px;
        font-weight:bold;
        color:rgba(51,51,51,1);
        line-height:18px;
      }
      .toSend{
        width:71px;
        height:27px;
        border:1px solid rgba(102,102,102,1);
        border-radius:5px;
        text-align:center;
        font-size:14px;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height: 27px;
        margin-right: 10px;
      }
    }
    .adr{
      font-size:14px;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:18px;
      -webkit-box-align:center;
      -webkit-align-items:flex-start;
      align-items:flex-start;
    }
    .footer{
      position:fixed;
      bottom:0;
      left:0;
      height:46px;
      right:0;
      border-top: 1px solid #ddd;
      background:#fff;
      overflow:hidden;
      z-index:5;
      .btn{
        -webkit-box-flex:1;
        -webkit-flex:1;
        flex:1;
        text-align:center;
        color: #fff;
        font-size:14px;
        background:rgba(70,183,255,1);
        font-weight:500;
        padding-top: 5px;
        .prices{
          font-size:16px;
          line-height:1.25;
          color:#fff;
        }
        span{
           color:#fff;
        }
        button{
          color:#fff;
        }
        ._van-button{
          color:#fff;
        }
      }
      .btn1{
        background:rgba(26,132,251,1);
      }
    }
    .kong{
      height:46px;
    }
</style>
